/*
 * 出售物资
 * @Author: ljb
 * @Date: 2018-07-12 10:00:16
 * @Last Modified by: ljb
 * @Last Modified time: 2018-08-06 18:00:38
 */
<style lang="less" rel="stylesheet/less" type="text/less" scoped>
    .v-admin-material-edit {
		max-height: 80vh;
		overflow-y: scroll;
		&::-webkit-scrollbar {
			display: none;
		}
        .material-form {
            width: 350px;
        }
    }
</style>
<template>
	<div class="v-admin-material-edit">

		<Row
			type="flex"
			justify="start">
			<i-col push="1">
				<Form
					ref="formValidate"
					:model="formValidate"
					:rules="ruleValidate"
					:label-width="labelWidth(120,170)"
					name="edit-form"
					class="material-form">

					<Form-item
						:label="$t('supplies_management.customer')"
						prop="customer_id">
						<Select
							v-model="formValidate.customer_id"
							name="edit-customer_id"
							clearable
							filterable>
							<Option
								v-for="customer in customers"
								:value="String(customer.id)"
								:key="customer.id"
								:label="customer.name"/>
						</Select>
					</Form-item>

					<Form-item
						:label="$t('supplies_management.sold_date')"
						prop="sold_at">
						<DatePicker
							v-model="formValidate.sold_at"
							:placeholder="$t('supplies_management.placeholder',{field:$t('supplies_management.sold_date')})"
							name="edit-sold_at"
							type="date"
							placement="bottom"
							@on-change="changeDate"/>
					</Form-item>

					<Form-item
						:label="$t('supplies_management.sold_num')"
						prop="num">
						<InputNumber
							:min="1"
							:max="materialDetail.stock"
							v-model="formValidate.num"
							:placeholder="$t('supplies_management.placeholder',{field:$t('supplies_management.sold_num')})"
							name="edit-num"/>
					</Form-item>

					<Form-item
						:label="$t('supplies_management.operator')"
						prop="operator">
						<i-input
							v-model="formValidate.operator"
							:placeholder="$t('supplies_management.placeholder',{field:$t('supplies_management.operator')})"
							name="edit-operator"
							type="text"/>
					</Form-item>

					<Form-item
						:label="$t('supplies_management.remark')"
						prop="remark">
						<i-input
							v-model="formValidate.remark"
							:autosize="{minRows: 2,maxRows: 5}"
							:placeholder="$t('supplies_management.placeholder',{field:$t('supplies_management.remark')})"
							name="edit-remark"
							type="textarea"/>
					</Form-item>

					<Form-item>
						<Button
							type="primary"
							@click="handleSubmit('formValidate')">
							{{ $t('common.submit') }}
						</Button>
						<Button
							type="ghost"
							style="margin-left: 8px"
							@click="handleReset('formValidate')">
							{{ $t('common.reset') }}
						</Button>
					</Form-item>

				</Form>
			</i-col>
		</Row>
	</div>
</template>

<script>
import labelWidthMixin from 'src/views/mixins/labelWidthMixin';

export default {
	name: 'SuppliesEdit',
	mixins: [labelWidthMixin],
	props: {
		customers: {
			type: Array,
			default() {
				return [];
			},
		},
		materialDetail: {
			type: Object,
			default() {
				return {};
			},
		},
		loading: {
			type: Boolean,
			default() {
				return false;
			},
		},
	},

	data() {
		return {
			formValidate: {
				customer_id: '',	// 物资名称

				num: 1,	// 采购数量

				remark: '',	// 生产商

				operator: '', // 采购人

				sold_at: '', // 采购日期
			},

			real_date: '',	// 用于存储时间组件改变后的值

			ruleValidate: { // 表单验证规则
				customer_id: [
					{
						required: true,
						message: this.$t('validate.required', { field: this.$t('supplies_management.customer') }),
						trigger: 'blur,change',
					},
				],
				num: [
					{
						required: true,
						type: 'number',
						message: this.$t('validate.required', { field: this.$t('supplies_management.sold_num') }),
						trigger: 'blur,change',
					},
				],
				remark: [],
				operator: [
					{
						required: true,
						message: this.$t('validate.required', { field: this.$t('supplies_management.operator') }),
						trigger: 'blur,change',
					},
				],
				sold_at: [
					{
						required: true,
						type: 'date',
						message: this.$t('validate.required', { field: this.$t('supplies_management.sold_date') }),
						trigger: 'blur,change',
					},
				],

			},

		};
	},
	methods: {
		/**
         * 时间选择器改变的回调
         * @param  {string} date {格式化后的时间}
         * @return {undefined}
         */
		changeDate(date) {
			this.real_date = date;
		},

		/**
         * 提交表单
         * @param  {string} name {表单的ref}
         * @return {undefined}
         */
		handleSubmit(name) {
			if (this.loading) return;
			this.$refs[name].validate((valid) => {
				if (valid) {
					this.formDataCreate();
				} else {
					this.$Message.error(this.$t('common.exist_empty_field'));
				}
			});
		},

		/**
         * 重置表单
         * @param  {string} name {表单的ref}
         * @return {undefined}
         */
		handleReset(name) {
			this.$refs[name].resetFields();
		},

		/**
         * 手动拼接表单数据
         * @return {undefined}
         */
		formDataCreate() {
			const new_object = {
				_method: 'PUT',

				customer_id: this.formValidate.customer_id,

				num: this.formValidate.num,

				remark: this.formValidate.remark || '',

				operator: this.formValidate.operator,

				sold_at: this.real_date,
			};

			this.$emit('update', new_object);
		},

	},


};
</script>
